import React, { useEffect, useState} from "react";
import {PageContainer} from "@ant-design/pro-components";
import {useParams} from "umi";
import {getInterfaceVoById} from "@/services/zoffyApi/interfaceInfoController";
import message from "antd/es/message";
import {Button, Card, Descriptions, Divider, Form, Input, Spin} from "antd";
import { Space} from "antd/es";
import {invokeInterface} from "@/services/zoffyApi/userInterfaceController";
import ReactJson from "@microlink/react-json-view";

const DetailInterfaceInfo: React.FC = () => {
  const [data, setData] = useState<API.InterfaceInfoVo>({});
  const [result, setResult] = useState<String>("")
  const [loading, setLoading] = useState<boolean>(false)
  const [requestParams, setRequestParams] = useState<JSON>(JSON.parse("{}"))
  const [requestHeader, setRequestHeader] = useState<JSON>(JSON.parse("{}"))
  const [responseHeader, setResponseHeader] = useState<JSON>(JSON.parse("{}"))
  const params = useParams();
  let [formRef] = Form.useForm();

  const loadData = async () => {
    const res = await getInterfaceVoById(
      {
        idRequest: {
          //@ts-ignore
          id: params.id,
        }
      }
    )
    console.log(formRef)
    if (!res.data) {
      message.error("获取接口信息失败");
      return;
    }
    setData(res.data)
    formRef.setFieldValue("userRequestParams",res.data?.requestParams)
    try {
      const tempRequestParams = JSON.parse(data?.requestParams || "{}");
      setRequestParams(tempRequestParams);

    } catch (e) {
      setRequestParams(JSON.parse("{}"));
    }
    try {
      setRequestHeader(JSON.parse(data?.requestHeader || "{}"));
    } catch (e) {
      setRequestHeader(JSON.parse("{}"))
    }
    try {
      setResponseHeader(JSON.parse(data?.responseHeader || "{}"))
    } catch (e) {
      setResponseHeader(JSON.parse("{}"))
    }
  }
  const handleSubmit = async (valuse: any) => {
    setResult("");
    setLoading(true);
    const res = await invokeInterface({
      interfaceId: data?.id,
      params: valuse.userRequestParams
    })
    setLoading(false);
    if (res.data) {
      //@ts-ignore
      setResult(res.data)
    } else {
      //@ts-ignore
      setResult(res.message)
    }

  }
  useEffect(
    () => {
      loadData();
    }, []
  )
  return (
    <PageContainer>
      <Card>
        <Descriptions title={data?.name} column={1}>
          <Descriptions.Item label={'描述'}>{data?.description}</Descriptions.Item>
          <Descriptions.Item label={'URL'}>{data?.url}</Descriptions.Item>
          <Descriptions.Item label={'接口序号'}>{data?.id}</Descriptions.Item>
          <Descriptions.Item label={'请求方式'}>{data?.method}</Descriptions.Item>
          <Descriptions.Item label={'请求参数'}>{data?.requestParams}</Descriptions.Item>
        </Descriptions>
        <ReactJson src={requestParams}/>
        <Divider/>
        <Descriptions column={1}>
          <Descriptions.Item label={'请求头'}>{data?.requestHeader}</Descriptions.Item>
        </Descriptions>
        <ReactJson src={requestHeader}/>
        <Divider/>
        <Descriptions column={1}>
          <Descriptions.Item label={'响应头'}>{data?.responseHeader}</Descriptions.Item>
        </Descriptions>
        <ReactJson src={responseHeader}/>
      </Card>
      <Space/>
      <Card>
        <Form
          form={formRef}
          name="invoke"
          onFinish={handleSubmit}
          autoComplete="off"
        >
          <Form.Item
            label="请求参数"
            name="userRequestParams"
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{offset: 8, span: 16}}>
            <Button type="primary" htmlType="submit">
              测试接口
            </Button>
          </Form.Item>
        </Form>
        <div style={{
          wordBreak: "normal"
        }}
        >
          <Spin spinning={loading}/>
          {result}
        </div>
      </Card>

    </PageContainer>
  );
}
export default DetailInterfaceInfo;
